import React from 'react';
import styles from '@/assets/pay/pay.module.css';

const RoomPay = () => {
  const [searchParams] = useSearchParams();
  // 支付订单ID状态（从路由参数获取）
  const [payid] = useState<number | string>(searchParams.get('payid') || 0);
  // 订单信息状态
  const [order, setOrder] = useState<any>({});
  // 倒计时显示状态
  const [minuteShow, setMinuteShow] = useState<string>('0分');
  const [secondShow, setSecondShow] = useState<string>('0秒');
  // 超时状态标记
  const [isTimeout, setIsTimeout] = useState<boolean>(false);

  // 定时器引用（使用useRef保持持久化引用）
  const timers = useRef<NodeJS.Timeout | null>(null);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  // 倒计时总时间（单位：秒）
  const maxtime = useRef<number>(0);
  // 超时状态引用
  const isTimeoutRef = useRef<boolean>(isTimeout);
  // 订单信息引用
  const orderRef = useRef<any>(order);
  //请求中止控制器（用于取消网络请求）
  const abortControllerRef = useRef(new AbortController());

  // 使用ref同步最新状态
  useEffect(() => {
    isTimeoutRef.current = isTimeout;
    orderRef.current = order;
  }, [isTimeout, order]);

  // 进来请求支付详情
  useEffect(() => {
    OrderData();
    // 组件卸载时的清理函数
    return () => {
      // 清除定时器
      CleanupResources();
    };
  }, []);

  const CleanupResources = () => {
    // 清除定时器
    if (timers.current) clearInterval(timers.current);
    if (intervalRef.current) clearInterval(intervalRef.current);

    // 中止正在进行的请求
    abortControllerRef.current.abort();

    // 初始化
    timers.current = null;
    intervalRef.current = null;
  };

  // 获取订单数据
  const OrderData = async () => {
    CleanupResources(); // 清理资源
    abortControllerRef.current = new AbortController(); // 创建新的请求控制器

    try {
      // 发送支付信息请求（携带中止信号）
      const result = await React.Http.post('/pay/PayInfo',
        { payid },
        { signal: abortControllerRef.current.signal }
      );

      if (result.code === 1) {
        // 初始化倒计时器
        setOrder(result.data);
        setIsTimeout(false);
        maxtime.current = 180;

        // 倒计时定时器
        timers.current = setInterval(CountDown, 1000);
        // 状态定时器
        intervalRef.current = setInterval(GetStatus, 1000);

      }
      else {
        React.fail(result.msg, () => React.navigate(-1));
      }
    } catch (error) { }
  };

  // 倒计时
  const CountDown = useCallback(() => {
    if (maxtime.current >= 0) {
      // 计算剩余时间
      const minutes = Math.floor(maxtime.current / 60);
      const seconds = maxtime.current % 60;
      // 更新计时器显示
      setMinuteShow(`${minutes}分`);
      setSecondShow(`${seconds}秒`);
      maxtime.current -= 1;
    }
    else {
      HandleTimeout();
    }
  }, []);

  // 倒计时结束
  const HandleTimeout = () => {
    if (!isTimeoutRef.current) {
      setIsTimeout(true);// 标记已超时
      CleanupResources(); // 清理所有资源

      // 更新订单支付过期状态
      setOrder((prev: any) => ({
        ...prev,
        wxcode: require('@/assets/pay/images/qrcode_timeout.png'),
        zfbcode: require('@/assets/pay/images/qrcode_timeout.png'),
      }));

      // 过期提示
      React.UI.Dialog.alert({
        title: '支付提示',
        content: '订单已失效',
        confirmText: '确定',
        onConfirm: () => React.navigate('/')
      });
    }
  };

  // 订单状态
  const GetStatus = async () => {
    try {
      const result = await React.Http.post('/pay/PayStatus',
        { payid },
        { signal: abortControllerRef.current.signal }
      );

      if (result.code === 1) {
        React.success(result.msg, () => React.navigate(result.url));
        setIsTimeout(true);// 标记已超时
        CleanupResources(); // 清理所有资源
      }

      if (result.code !== 1 && result.msg === '支付订单不存在') {

        React.fail(result.msg, () => React.navigate('/'));
        return;
      }
    } catch (error) { }
  };

  // 复制金额
  const OnCopy = () => {
    const text = order.price?.toString() || '';
    // 用于将 text 内容写入剪贴板
    navigator.clipboard.writeText(text)
      .then(() => React.success('已复制金额'))
      .catch(() => React.fail('复制失败'));
  };

  return (
    <div className={styles.mod_ct}>
      <h1 className={styles.mod_title}>
        <span className={order.type === "zfb" ? "ico_log ico-4" : "ico_log ico-3"}></span>
      </h1>

      <div style={{ marginTop: '10px' }}>
        <span style={{ color: 'red' }}>
          提示：付款金额要与显示的金额一致，否则后果自负
        </span>
      </div>

      <div className={styles.amount} id="money">
        ￥<span className={styles.amount2}>{order.price}</span>元
        <span
          style={{ fontSize: '10px', color: 'darkcyan' }}
          onClick={OnCopy}
        >
          &nbsp;&nbsp;复制金额
        </span>
      </div>

      <div className="qrcode-img-wrapper">
        <div className="qrcode-img-area">
          <img
            src={order.type === 'wx' ? order.wxcode : order.zfbcode}
            style={{ width: '220px' }}
            alt="支付二维码"
          />
        </div>
      </div>

      <div className={styles.time_item} style={{ paddingTop: '10px' }}>
        <div className={styles.time_item}>
          <h1>订单名称：<span>{order.name}</span></h1>
        </div>
        <div className={styles.time_item}>
          <h1>订单号：<span>{order.code}</span></h1>
        </div>
        <strong>订单支付有效期</strong>
        <strong>{minuteShow}</strong>
        <strong>{secondShow}</strong>
      </div>

      <div className={styles.tip}>
        <div className={styles.ico_scan}></div>
        <p>{order.type === 'wx' ? '打开微信扫一扫' : '打开支付宝扫一扫'}</p>
      </div>
    </div>
  );
};

export default RoomPay;